<template>
  <div class="Header-container">
    <div class="header-box">
      <div class="logo-box">
        <div>logo图片</div>
        <div class="location">当前位置</div>
      </div>
      <div class="user-box">
        <!-- 首页 -->
        <div class="index">
          <el-link @click="$router.push('/index')">首页</el-link>
        </div>
        <!-- 消息 -->
        <div class="message">
          <el-link>消息</el-link>
        </div>
        <div class="law">
          <el-link>维权知识</el-link>
        </div>
        <!-- 用户昵称 -->
        <el-dropdown @command="handleCommand">
          <!-- <span class="el-dropdown-link"> 张三 </span> -->

          <span>
            <el-link>张三<i class="el-icon-arrow-down el-icon--right"></i></el-link
          ></span>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item command="a">个人中心</el-dropdown-item>
            <el-dropdown-item command="b">钱包</el-dropdown-item>
            <el-dropdown-item command="b">学生认证</el-dropdown-item>
            <el-dropdown-item command="c">申请记录</el-dropdown-item>
            <el-dropdown-item command="e" divided>退出登录</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
        <!-- 用户头像 -->
        <div class="user-avatar">
          <div class="block"><el-avatar :size="28" :src="circleUrl"></el-avatar></div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Header',
  data() {
    return {
      circleUrl: 'https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png'
    }
  },
  methods: {
    //个人中心跳转
    handleCommand(command) {
      if (command === 'a') {
        this.$router.push('/homePage')
      }
    }
  }
}
</script>

<style lang="less" scoped>
.Header-container {
  background-color: #202329;
}
.header-box {
  background-color: #202329;
  color: white;
  width: 1184px;
  margin: 0 auto;
  height: 50px;
  font-size: 12px;
  line-height: 50px;
  display: flex;
  justify-content: space-between;

  .logo-box {
    margin-left: 10px;
    display: flex;
    .location {
      margin-left: 8px;
    }
  }
  .user-box {
    display: flex;
    margin-right: 10px;
    .message {
      margin-right: 20px;
    }
    .law {
      margin-right: 20px;
    }
    .index {
      margin-right: 20px;
    }
  }
}
// 用户名样式
// .el-dropdown-link {
//   // cursor: pointer;
//   // color: #00b3b3;
// }
// .el-icon-arrow-down {
//   font-size: 12px;
// }
.el-link.el-link--default {
  color: white;
}
.el-link.el-link--default:hover {
  color: #00b3b3;
}
//头像
.user-avatar {
  line-height: 70px;
  margin-left: 5px;
}
</style>
